        
        var transform = roll = autoAppearing = disorderAnimate = itemFollowingMove = null;
        var oriDeg = 80;
        var oriScale = 0.5;
        var oriTranlate = -1000;
        var mouseX,mouseY,targetTop;
        
        $(document).ready(function(){
            mouseX = event.clientX || 0;
            mouseY = event.clientY || 0;
            
            var nums = [];
            for(var n = 0;n < $('.examples .num').length;n++){
                $('.examples .num')[n].ind = n;
                nums.push(Number($('.examples .num')[n].innerText));
            } 
            
            $('.examples .num').text('1');
            function makeInterval(el){
                var index = el.ind;
                /*var maxTime = 0;
                for(var m = 0;m < nums.length;m++){
                    if(nums[m] > maxTime){
                        maxTime = nums[m];
                    }
                }*/ 
                el.timeOut = function(){
                    setTimeout(function(){
                        if(el.innerText != nums[index]){
                            el.time = parseInt(600 / (nums[index] - el.innerText));
                            setTimeout(function(){
                                el.innerText = String(Number(el.innerText) + 1);
                                el.timeOut();
                            },el.time);
                        }
                    },10);
                }
                el.timeOut();
            }
            roll = setInterval(function(){
                if(beginningDelay != null){
                    beginningDelay += 10;
                    if(beginningDelay <= animateDelayCount) return false;
                }
                var ele_top = $('.roll .box')[1].offsetTop + $('.roll .box')[1].offsetHeight;
                var ele_h = 0;
                var window_h = window.innerHeight;
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                if((/*ele_top > window_h && */
                    //
                    ele_top < window_h + scrollTop)
                    &&
                    (ele_h + ele_top >scrollTop)
                     ||
                     (ele_top < window_h && scrollTop < ele_top)){
                         for(var s = 0;s < $('.examples .num').length;s++){
                             makeInterval($('.examples .num')[s]);
                         }
                         clearInterval(roll);
                     }
            },10);

            function makeTimeOut(ind){
                var time = ind * 200;
                setTimeout(function(){
                    $('.details .line')[ind * 2].className = $('.details .line')[ind * 2 + 1].className = 'line move';
                },time);
            }
            moveLine = setInterval(function(){
                if(beginningDelay != null){
                    beginningDelay += 10;
                    if(beginningDelay <= animateDelayCount) return false;
                }
                var ele_top = $('.row')[1].offsetTop + $('.row')[1].offsetHeight;
                var ele_h = 0;
                var window_h = window.innerHeight;
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                if((/*ele_top > window_h && */
                    //
                    ele_top < window_h + scrollTop)
                    &&
                    (ele_h + ele_top >scrollTop)
                     ||
                     (ele_top < window_h && scrollTop < ele_top)){
                         for(var m = 0;m < Math.ceil($('.details .line').length / 2);m++){
                             makeTimeOut(m);
                         }
                         clearInterval(moveLine);
                     }
            },10);

            function transform(){
                var ele_top = $('.tip')[0].offsetTop;
                var ele_h = $('.tip')[0].offsetHeight;
                var window_h = window.innerHeight;
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                
                var tempDeg = oriDeg - 80 * (scrollTop / ele_top);
                var tempScale = oriScale + 0.5 * (scrollTop / ele_top);
                var tempTranlate = oriTranlate + Math.abs(oriTranlate) * (scrollTop / ele_top);
                if(ele_top > scrollTop + window_h){
                    $('.trans')[0].style.transform = 'translate3d(0,0,' + oriTranlate +'px) scale(' + oriScale + ') rotateX(' + oriDeg + 'deg)';
                }else if(ele_top < scrollTop + window_h && ele_top >= scrollTop){
                    $('.trans')[0].style.transform = 'translate3d(0,0,' + tempTranlate +'px) scale(' + tempScale + ') rotateX(' + tempDeg + 'deg)';
                }else{
                    $('.trans')[0].style.transform = 'translate3d(0,0,0) scale(1) rotateX(0deg)';
                }
                //底色由黑变白
                if(scrollTop + window_h > $('.introduce')[0].offsetTop + $('.introduce')[0].offsetHeight / 2){
                    var add = scrollTop + window_h - ($('.introduce')[0].offsetTop + $('.introduce')[0].offsetHeight / 2);
                    var rgb = 27 + add;
                    rgb = parseInt(rgb);
                    $('.shave').css('background','rgb(' + rgb + ',' + rgb + ',' + rgb + ')');
                    return false;
                }
    
                if(scrollTop < ele_top - window_h + ele_h * 0.75){
                    $('.shave').css('background','rgb(255,255,255)');
                }
                else if(scrollTop >= ele_top - window_h + ele_h * 0.75 && scrollTop <= ele_top){
    
                    var overHalf = window_h - ele_h * 0.75;
                    var rgb = 255 - (255 - 27) * (scrollTop - (ele_top + ele_h * 0.75 - window_h)) / overHalf;
                    rgb = parseInt(rgb);
                    $('.shave').css('background','rgb(' + rgb + ',' + rgb + ',' + rgb + ')');
                }else if(scrollTop > ele_top){
                    
                    $('.shave').css('background','rgb(27,27,27)');
                }
                
            }
            setTimeout(transform,2100);
            
            
            $('body').mousemove(function(event){
                mouseX = event.clientX;
                mouseY = event.clientY;
                
            })
            chasingMouse = setInterval(function(){
                if(window.innerWidth <= 767){
                    $('.needHover').removeClass('mouseOn');
                    
                    return false;
                }
                for(var n = 0;n < $('.needHover').length;n++){
                    var ele_h = $('.needHover')[n].offsetHeight;
                    var ele_w = $('.needHover')[n].offsetWidth;
                    var targetTop = mouseY - $('.needHover')[n].getBoundingClientRect().top;
                    var targetLeft = mouseX - $('.needHover')[n].getBoundingClientRect().left;
                    if((targetLeft < 0 || targetLeft > ele_w) || (targetTop < 0 || targetTop > ele_h)){
                        

                        if($('.needHover')[n].className.indexOf('hoverFather') >= 0){
                            var son_h = $('.needHover:eq(' + n + ') .hoverSon')[0].offsetHeight;
                            var son_w = $('.needHover:eq(' + n + ') .hoverSon')[0].offsetWidth;
                            var sonTop = mouseY - $('.needHover:eq(' + n + ') .hoverSon')[0].getBoundingClientRect().top;
                            var sonLeft = mouseX - $('.needHover:eq(' + n + ') .hoverSon')[0].getBoundingClientRect().left;
                            if((sonLeft < 0 || sonLeft > son_w) || (sonTop < 0 || sonTop > son_h)){
                                if($('.needHover')[n].className.indexOf('mouseOn') < 0) continue;
                                $('.needHover:eq(' + n +')').removeClass('mouseOn');
                            }else{
                                
                                if($('.needHover')[n].className.indexOf('mouseOn') >= 0) continue;
                                $('.needHover:eq(' + n +')').addClass('mouseOn');
                            }
                        }else{
                            if($('.needHover')[n].className.indexOf('mouseOn') < 0) continue;
                            $('.needHover:eq(' + n +')').removeClass('mouseOn');
                        }
                    }else{//if((targetLeft > 0 && targetLeft < ele_w) && (targetTop > 0 && targetTop < ele_h))
                        if($('.needHover')[n].className.indexOf('mouseOn') >= 0) continue;
                        $('.needHover:eq(' + n +')').addClass('mouseOn');
                    }
                }
                
            },10);
            
            
            var autoAnimate = [];
            for(var a = 0;a < $('.autoAnimate').length;a++){
                $('.autoAnimate')[a].appears = false;
                autoAnimate.push($('.autoAnimate')[a]);
            }   
            
            autoAppearing = setInterval(function(){
                if(!autoAnimate.length){
                    clearInterval(autoAnimate);
                    autoAnimate = null;
                }
                if(beginningDelay != null){
                    beginningDelay += 10;
                    if(beginningDelay <= animateDelayCount) return false;
                }
                var fixed = $('.navSide').css('height') == '50px'?true:false;
                for(var n = 0;n < autoAnimate.length;n++){
                    //var ele_top = autoAnimate[n].offsetTop;
                    var ele_h = autoAnimate[n].offsetHeight;
                    var window_h = window.innerHeight;
                    //var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                    var window_top = autoAnimate[n].getBoundingClientRect().top;
                    fixed && (ele_h -= 50);
                    autoAnimate[n].className.indexOf('disorder') > 0 && (window_h -= 160);
                if(
                    
                    //ele_top + 160 < window_h + scrollTop
                    window_top <= window_h
                    &&
                    window_top > - ele_h
                    //ele_h + ele_top > scrollTop
                     ){
                         if(autoAnimate[n].className.indexOf('inview') <= 0){
                            $('.autoAnimate:eq(' + n + ')').addClass('inview');
                         }
                         autoAnimate[n].appears = true;
                    }else{
                        if(autoAnimate[n].className.indexOf('inview') >= 0){
                            $('.autoAnimate:eq(' + n + ')').removeClass('inview');
                         }
                            autoAnimate[n].appears = false;
                    } 
                }
            },10);

            for(var s = 0;s < $('.scrollItem').length;s++){
                var dataMoveDown = $('.scrollItem')[s].getAttribute('data-bottom-top').substring($('.scrollItem')[s].getAttribute('data-bottom-top').indexOf("(") - 1,$('.scrollItem')[s].getAttribute('data-bottom-top').length - 1).split(',');
                var dataMoveTop = $('.scrollItem')[s].getAttribute('data-top-bottom').substring($('.scrollItem')[s].getAttribute('data-top-bottom').indexOf("(") - 1,$('.scrollItem')[s].getAttribute('data-top-bottom').length - 1).split(',');
                $('.scrollItem')[s].moveDown = parseInt(dataMoveDown[1]);
                $('.scrollItem')[s].moveTop = parseInt(dataMoveTop[1]);
                var itemTop = $('.scrollItem')[s].getBoundingClientRect().top;
                    
                    if(itemTop >= window.innerHeight){
                        
                        $('.scrollItem')[s].currentMoveVal = $('.scrollItem')[s].moveDown;
                        $('.scrollItem')[s].style.transform = 'translate(0,' + $('.scrollItem')[s].currentMoveVal + 'px)';
                    }else if(itemTop < window.innerHeight && itemTop > -$('.scrollItem')[s].offsetHeight){
                        if($('.scrollItem')[s].className.indexOf('contrary') >= 0){
                            $('.scrollItem')[s].currentMoveVal = $('.scrollItem')[s].moveDown + ($('.scrollItem')[s].moveTop - $('.scrollItem')[s].moveDown) * ((window.innerHeight - itemTop) / (window.innerHeight + $('.scrollItem')[s].offsetHeight));
                        }else{
                            
                            $('.scrollItem')[s].currentMoveVal = $('.scrollItem')[s].moveDown - ($('.scrollItem')[s].moveDown - $('.scrollItem')[s].moveTop) * ((window.innerHeight - itemTop) / (window.innerHeight + $('.scrollItem')[s].offsetHeight));
                        }
                       
                       $('.scrollItem')[s].style.transform = 'translate(0,' + $('.scrollItem')[s].currentMoveVal + 'px)';
                    }else{
                        $('.scrollItem')[s].currentMoveVal = $('.scrollItem')[s].moveTop;
                        $('.scrollItem')[s].style.transform = 'translate(0,' + $('.scrollItem')[s].currentMoveVal + 'px)';
                    }
                    $('.scrollItem')[s].updating = false;
            }
            $(window).scroll(function(){   //开始监听滚动条
                transform();
                clearInterval(itemFollowingMove);
                
                itemFollowingMove = setInterval(function(){
                    
                    for(var f = 0;f < $('.scrollItem').length;f++){
                        //元素距离窗口顶部高度
                        var itemTop = $('.scrollItem')[f].getBoundingClientRect().top - $('.scrollItem')[f].currentMoveVal;
                        var destination;
                        
                        if(itemTop >= window.innerHeight){
                            destination = $('.scrollItem')[f].moveDown;
                            
                        }else if(itemTop < window.innerHeight && itemTop > -$('.scrollItem')[f].offsetHeight){
                            
                            if($('.scrollItem')[f].className.indexOf('contrary') >= 0){
                                destination = $('.scrollItem')[f].moveDown + ($('.scrollItem')[f].moveTop - $('.scrollItem')[f].moveDown) * ((window.innerHeight - itemTop) / (window.innerHeight + $('.scrollItem')[f].offsetHeight));
                            }else{
                                destination = $('.scrollItem')[f].moveDown - ($('.scrollItem')[f].moveDown - $('.scrollItem')[f].moveTop) * ((window.innerHeight - itemTop) / (window.innerHeight + $('.scrollItem')[f].offsetHeight));
                            }
                        }else{
                            destination = $('.scrollItem')[f].moveTop;
                        }
                        /*if($('.scrollItem')[f].currentMoveVal == destination){
                            continue;
                        }*/
                        $('.scrollItem')[f].updating = true;
                        //举例; start:189 > destination 188.5 => 188,再次通过新的判断变为189,下次进入又会变为188 以此类推无限反复循环
                        if($('.scrollItem')[f].currentMoveVal < destination){
                            if(destination - $('.scrollItem')[f].currentMoveVal <= 1){
                                $('.scrollItem')[f].currentMoveVal = destination;
                            }else{
                                $('.scrollItem')[f].currentMoveVal = $('.scrollItem')[f].currentMoveVal + Math.ceil((destination - $('.scrollItem')[f].currentMoveVal) / 10);
                            }
                        }else{
                            if($('.scrollItem')[f].currentMoveVal - destination <= 1){
                                $('.scrollItem')[f].currentMoveVal = destination;
                            }else{
                                $('.scrollItem')[f].currentMoveVal = $('.scrollItem')[f].currentMoveVal - Math.ceil(($('.scrollItem')[f].currentMoveVal - destination) / 10);
                            }
                        }
                        
                        $('.scrollItem')[f].style.transform = 'translate(0,' + $('.scrollItem')[f].currentMoveVal + 'px)';
                        if($('.scrollItem')[f].currentMoveVal == destination){
                            $('.scrollItem')[f].updating = false;
                        }
                    }
                    
                    for(var j = 0;j < $('.scrollItem').length;j++){
                        if($('.scrollItem')[j].updating) return false;
                    }
                    
                    clearInterval(itemFollowingMove);
                },10)
            })
        
        })

        